<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>

<html>
	<head>
	<%
    	UserService userService = UserServiceFactory.getUserService();
    	User user = userService.getCurrentUser();
	%>
		<title>Studie</title>
		<link rel="stylesheet" href="customThemeJ/themes/StudyStatTheme1.min.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css" />
		<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/>
			
		<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
		<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.js"></script>
		<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.MetaData.js' type="text/javascript" language="javascript"></script>
		<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script>
		<script type="text/javascript">
			
			$(document).ready(function(){
				$("#oef").hide();
				$("#pg").hide();
				$("#theorie").attr('checked', false);
				$("#oefeningen").attr('checked', false);
				$("#theorie").click(function() {
					$("#pg").toggle("slow");
				});
				$("#oefeningen").click(function() {
					$("#oef").toggle("slow");
				});
			});
			
			function validate() {
				var ret = true;
			    if (!$('input:radio').is(':checked')) {
			       alert('Geef een rating!');
			        ret = false;
			    }
			    else if (<%= user.getUserId() %> == null) {
			    	alert('Gelieve in te loggen!');
			    	ret = false;
			    }
			    else if(!$("#theorie:checked").val() && !$("#oefeningen:checked").val()) {
			    	alert('Gelieve aan te duiden wat je gestudeerd hebt');
			    	ret = false;
			    }
			    else if($("#theorie:checked").val() && (document.getElementById("theoriepaginas").value == "" || document.getElementById("theoriepaginas").value == null)) {
			    	alert("Gelieve het aantal gestudeerde pagina's in te geven.");
			    	ret = false;
			    }
			    else if($("#theorie:checked").val() && isNaN(document.getElementById("theoriepaginas").value)) {
			    	alert("Het aantal gestudeerde pagina's dat u heeft ingegeven is geen nummer.");
			    	ret = false;
			    }
			    else if($("#theorie:checked").val() && ((parseFloat(document.getElementById("theoriepaginas").value) != parseInt(document.getElementById("theoriepaginas").value) ) || parseInt(document.getElementById("theoriepaginas").value) <= 0)){
			    	alert("Het aantal gestudeerde pagina's dat u heeft ingegeven is geen geldige waarde.");
			    	ret = false;
			    }
			    else if($("#oefeningen:checked").val() && (document.getElementById("oefeningenaantal").value == "" || document.getElementById("oefeningenaantal").value == null)) {
			    	alert("Gelieve het aantal gemaakte oefeningen in te geven.");
			    	ret = false;
			    }
			    else if($("#oefeningen:checked").val() && isNaN(document.getElementById("oefeningenaantal").value)) {
			    	alert("Het aantal gemaakte oefeningen dat u heeft ingegeven is geen nummer.");
			    	ret = false;
			    }
			    else if($("#oefeningen:checked").val() && ((parseFloat(document.getElementById("oefeningenaantal").value) != parseInt(document.getElementById("oefeningenaantal").value) ) || parseInt(document.getElementById("oefeningenaantal").value) <= 0)){
			    	alert("Het aantal gemaakte oefeningen dat u heeft ingegeven is geen geldige waarde.");
			    	ret = false;
			    }
			    return ret;
			  }
		</script>
			
	</head>
<body>
<div data-role="page" data-theme="b">

	<!-- Titelbalk -->
	<div data-role="header" data-position="inline" data-theme="b">
	<a href="" data-icon="star" class="ui-btn-left" rel="external">Achievements</a>
	<h1>The Real Study Stat</h1>
	<a href="option.jsp" data-icon="gear" class="ui-btn-right" rel="external">Options</a>
	<div data-role="navbar">
		<ul>
			<li><a href="" rel="external">Home</a></li>
			<li><a href="" rel="external">Statistieken</a></li>
			<li><a href="" rel="external">Contact</a></li>
			<li><a href="" rel="external">Over Ons</a></li>
			<li><a href="" rel="external">Uitloggen</a></li>
		</ul>
	</div>
	</div>
	
	<!-- Content -->
	<div data-role="content" id="content">
	<div class="ui-grid-b">
	<div class="ui-block-a"></div>
	<div class="ui-block-b">
		<form action="/opmeten" method="post" data-ajax="false" onSubmit="return validate()">
			Wat heb je gestudeerd?
			
			<div>
			Theorie: <br/>&nbsp;<br />
			<input type="checkbox" id="theorie" name="theorie" value="theorie"/> <br/>
				<div id="pg">
				Aantal gestudeerde pagina's: <input type="text" name="theoriepaginas" id="theoriepaginas"/>
				</div>
			</div> <br/>&nbsp;<br />
			
			<div>
			Oefeningen: <br/>&nbsp;<br />
			<input type="checkbox" id="oefeningen" name="oefeningen" value="oefeningen"/> <br/>
				<div id="oef" >
				Aantal gemaakte oefeningen: <input type="text" name="oefeningenaantal" id="oefeningenaantal" />
				</div>
			</div> <br />
			
			<div>
			Rating: <br/>&nbsp;<br />
			<div class="ui-grid-b">
				<div class="ui-block-a"></div>
				<div class="ui-block-b">
					<input name="star1" type="radio" value="rating1" class="star"/>
					<input name="star1" type="radio" value="rating2" class="star"/>
					<input name="star1" type="radio" value="rating3" class="star"/>
					<input name="star1" type="radio" value="rating4" class="star"/>
					<input name="star1" type="radio" value="rating5" class="star"/>
				</div>
				<div class="ui-block-c"></div>
			</div>
			</div>
			
			<br/>
			<input type="hidden" name="userID" value= "<%= user.getUserId() %>"/>
			<input type="submit" name="submitstudie" value="Doorsturen" />
		</form>
	</div>
	<div class="ui-block-c"></div>
	</div>
</div>
</div>
</body>
</html>